<template>
  <scroll-view
    class="album_scrow_view"
    @scrolltolower="handlerTolower"
    scroll-y
  >
    <!-- 轮播图 swiper 
      1、自动轮播autoplay
      2、指示器 （圆点）indicator-dots
      3、衔接轮播 circular

      4、swiper 默认的高度是150ppx
      5、image
        默认的宽度320px ==>基本样式中重置了100%
        默认的高度240px 高度默认不变
      6、大概计算下图片的宽度和高度的比例
      7、把图片的宽度和高度的比例写入到swiper样式中，见下面样式的height
          原图的宽/高 640 /284 = 2.3 2.4左右
      8、 swiper-item样式 
         宽和高默认100%
    -->
    <view class="album_swiper">
      <swiper class="swiper" autoplay indicator-dots circular>
        <swiper-item
          v-for="item in banner"
          :key="item.id"
         
        >
          <image :src="item.thumb" mode="" />
          <!-- <view class="swiper-item uni-bg-red">A</view> -->
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播图结束 -->
    <!-- 列表开始 -->
    <view class="album_list">
      <navigator class="album_itemm" 
      v-for="item in album" 
      :key="item.id"
      :url="`/pages/album/index?id=${item.target}`"
      >
        <view class="album_img">
          <image :src="item.cover" mode="aspectFill"/>
        </view>
        <view class="album_info">
          <view class="album_name">{{ item.name }}</view>
          <view class="album_desc">{{ item.desc }}</view>
          <view class="album_btn">
            <view class="album_attention"> 关注 </view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 列表结束 -->
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0,
      },
      //轮播图数组
      banner: [],
      // 列表数据
      album: [],
      hasMore: true,
    };
  },
  methods: {
    // 获取数据接口
    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v1/wallpaper/album",
        data: this.params,
      }).then((result) => {
        // console.log("专辑"+result);
        if (result.res.album.length === 0) {
          this.hasMore = false;
          return;
        }
        if (this.album.length === 0) {
          this.banner = result.res.banner;
        }
        // this.album = result.res.album;
        this.album = [...this.album, ...result.res.album];
      });
    },
    handlerTolower() {
      // console.log("人生丰富2222222222222222222222222222222222222222222222");
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "专辑数据加载完毕",
          icon: "none",
          // duration: 2000
        });
      }
    },
  },
  mounted() {
    this.getList();
    //   debugger
    //   // 修改页面的标题
    //   uni.setNavigationBarTitle({
    //     title: '专辑'
    //   });
  },
  

};
</script>

<style lang='scss' scoped>
.album_scrow_view {
  // height: calc(100vh -36px);
  // 不同手机的高度是不一样的，计算 屏幕的高度-头部标题的高度
  height: calc(100vh - 36px);
}
.album_swiper {
  swiper {
    // 750rpx / 2.3
    // height: calc(750rpx /2.3);
    height: 326.1rpx;
    image {
      height: 100%;
    }
  }
}
.album_list {
  padding: 10rpx;
  .album_itemm {
    padding: 10rpx 0;
    display: flex;
    border-bottom: 1rpx solid #ccc;
    .album_img {
      flex: 1;
      padding: 10rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
    .album_info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;
      .album_name {
        font-size: 30rpx;
        color: #000;
        padding: 10rpx 0;
      }

      .album_desc {
        padding: 10rpx 0;
        font-size: 24rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .album_btn {
        padding: 15rpx;
        display: flex;
        justify-content: flex-end;
        .album_attention {
          color: $color;
          border: 1rpx solid $color;
          padding: 10rpx;
        }
      }
    }
  }
}
</style>